(function () {
  const particularsWrapper = document.querySelector('#particulars-wrapper');
  const messageBoard = document.querySelector('#message-wrapper .message-board');
  const btnLookMessage = document.querySelector('.look-message');
  const id = getQueryString('id');

  let pageNum = 1;
  let totalPage;

  /* 获取博客 */
  getBlog()
  function getBlog() {
    axios.get('/getBlog', {
      params: {
        id: id
      }
    }).then(response => {
      let particulars = response.data;
      particularsWrapper.insertAdjacentHTML('afterbegin', `
        <div class="title-wrapper flex justify-content-between align-items-center">
            <h2 class="title">${particulars.title}</h2>
            <h4 class="date">发表于: ${particulars.createTime.substring(0, 10)}</h4>
        </div>
        <article class="article">
            <p>${particulars.abstract}</p>
            <img src="${imgUrl(particulars.image)}" alt="">
            <p>${particulars.content}</p>
        </article>
        `);
      getComment()
    })
  }
  function getComment() {
    axios.get('/getComments', {
      params: {
        id,
        pageNum,
        pageSize: 3
      }
    }).then(res => {
      const list = res.data.data // 合并数组
      list.forEach(comment => {
        messageBoard.insertAdjacentHTML('beforeend', `
          <div class="message">
              <img src="./images/message-icon3.png" alt="">
              <span class="message-name">${comment.nickname}</span>
              <span class="message-date">${comment.commentTime}</span>
              <p class="message-content">
                  ${comment.content}
              </p>    
          </div>
        `);
      });
      totalPage = res.data.totalPage
      if (totalPage <= pageNum) {
        btnLookMessage.classList.add('disabled');
        btnLookMessage.innerHTML = '已无更多留言'
      }
    })
  }

  //查看更多评论
  btnLookMessage.addEventListener('click', function () {
    if (totalPage > pageNum) {
      pageNum++;
      getComment()
    }
  }, false);

  //发布评论
  const btnIssue = document.querySelector('.btn-issue');
  const nameInput = document.querySelector('#name-input');
  const emailInput = document.querySelector('#email-input');
  const contentTextarea = document.querySelector('#content-textarea');
  btnIssue.addEventListener('click', function () {
    axios.post('/postComment', {
      articleId: id,
      nickname: nameInput.value,
      email: emailInput.value,
      content: contentTextarea.value
    }).then(function (res) {
      if (res.data == 'success') {
        alert('发送成功！')
        let arr = JSON.parse(res.config.data);
        messageBoard.insertAdjacentHTML('afterbegin', `
        <div class="message">
            <img src="./images/blogsParticulars/message-icon2.png" alt="">
            <span class="message-name">${arr.name}</span>
            <span class="message-date">${arr.date}</span>
            <p class="message-content">
                ${arr.content}
            </p>
        </div>
      `);
      }
    });
  }, false);
})();